<template>
  <!--实时时间-->
  <componentBox :id="id" :ref="id" :option="config.location">
    <div :style="getBoxStyle()">
      <span :style="getStyle()">{{date |fmtDate(option.format)}}</span>
    </div>
  </componentBox>
</template>

<script>
  export default {
    name: "screen_text",
    components: {
      'componentBox': () => import('@/components/screen/componentBox.vue'),
    },
    computed: {
      //判断是否可以操作dom
      screenMove() {
        return this.$store.state.screenMove
      },
    },
    props: {
      id: String,
      config: Object,
    },
    data(){
      return{
        date:new Date(),
        option:{},
      }
    },
    created(){
      this.option=this.config.option;
      //实时刷新时间
      setInterval(res=>{
          this.date=new Date();
      },1000);
    },
    methods: {


      //设置容器的样式
      getBoxStyle() {
        return {
          //字体对齐方式
          "text-align": this.option.textAlign,
        }
      },

      //设置样式
      getStyle() {
        return {
          //字体颜色
          "color": this.option.color,
          //字体大小
          "font-size": this.option.fontSize + "px",
          //字体加粗
          "font-weight": this.option.fontWeight,
          //字体背景
          "background-color": this.option.backgroundColor,
          //字体间距
          "letter-spacing": this.option.letterSpacing + "px",
          //字体行高
          "line-height": this.option.lineHeight + "px",
        }
      }
    }
  }
</script>

<style scoped>


</style>
